<%--
  Created by IntelliJ IDEA.
  User: luo20
  Date: 2025/4/18
  Time: 19:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" pageEncoding="UTF-8" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>会员信息情况</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.7.1.min.js"></script>
</head>
<style>
    #mainBox {
        width: 40%;
        margin: 35px auto;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        position: relative;
    }

    #top, #startTH {
        background-color: rgb(53, 59, 43);
    }
    #msg{
        position: absolute;
        top: -30px;
        right: 12px;
    }
</style>
<body>
<div id="mainBox">
    <c:if test="${not empty param.message}">
        <div id="msg">
                ${param.message}
        </div>
    </c:if>
    <table border="1">
        <thead>
        <tr id="top">
            <th colspan="7">俱乐部会员信息</th>
        </tr>
        <tr id="startTH">
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>家庭住址</th>
            <th>Email</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="mainBody">

        </tbody>
    </table>
</div>
</body>
<script>
    $(function () {
        findAll()
    })

    function findAll() {
        $.ajax({
            url: "/membersInfo/findAll",
            type: "get",
            dataType: "json",
            success: function (result) {
                if (result.code == 200) {
                    //清空数据
                    $("#mainBody").empty()
                    flushTable(result.data)
                    $("#mainBody tr:odd").css("background-color", "rgb(53, 59, 43)")
                } else {
                    alert(result.message)
                }
            },
            error: function (result) {
                alert(result.message)
            }
        })

        function flushTable(members) {
            //添加数据
            $.each(members, function (index, member) {
                //添加到mainbody下
                $('#mainBody').append('<tr>' +
                    '<td>' +
                    '<a href="/findGender?id=' + member.id + '">' + member.id + '</a>'
                    + '</td>' +
                    '<td>' + member.mname + '</td>' +
                    '<td>' + member.mgender + '</td>' +
                    '<td>' + member.mage + '</td>' +
                    '<td>' + member.maddress + '</td>' +
                    '<td>' + member.memail + '</td>' +
                    '<td>' +
                    '<a href="#" onclick="deleteById(' + member.id + ')">删除</a>' +
                    '</td>' +
                    '</tr>')
            })
        }

    }

    function deleteById(id) {
        let flag = confirm("确定删除吗？")
        if (flag) {
            $.ajax({
                url: "/membersInfo/" + id,
                type: "post",
                data: {
                    _method: "delete"
                },
                // contentType:"application/json;charset=utf-8",
                dataType: "json",
                success: function (result) {
                    if (result.code == 200) {
                        alert(result.message)
                        location.reload()
                    } else {
                        alert(result.message)
                    }
                },
                error: function () {
                    alert("请求失败")
                }
            })
        }

    }
</script>
</html>
